<template>
	<view class="card">
		<view class="header">
			<text>| {{title}}</text>
		</view>
		<view class="body">
			<!-- 卡片主体是一个插槽，需要父组件提供具体内容 -->
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zh-card",
		// 组件的自定义属性
		props: {
			title: {
				type: String,
				default: "标题",
				required: false,
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.card {
		background-color: #fff;
		margin-top: $uni-spacing-col-lg;
		flex-direction: column;

		.header {
			padding: $uni-spacing-col-base $uni-spacing-row-lg;
			font-size: $uni-font-size-sm;
			font-weight: 600;
		}

		.body {
			padding: $uni-spacing-col-base $uni-spacing-row-lg;
		}
	}
</style>
